<template>
	<view class="content">
		<picker @change="bindPickerChange" :value="typeIndex" :range="types">
			<view class="inp">
				<view class="left"><text>快递类型</text></view>
				<text class="right">{{types[typeIndex]}} ▼</text>
			</view>
		</picker>

		<picker @change="expreessChange" :value="expressIndex" :range="expresses" range-key="siteName">
			<view class="inp">
				<view class="left"><text>取件地点</text></view>
				<text class="right">{{expresses[expressIndex].siteName}} ▼</text>
			</view>
		</picker>
		<view class="inp">
			<view class="left"><text>收件地址</text></view>
			<input class="right" type="text" v-model="getAddress" placeholder="输入送达地址" />
		</view>
		<view class="inp">
			<view class="left"><text>报酬(元)</text></view>
			<input class="right" type="digit" v-model="price" placeholder="输入报酬" />
		</view>
		<view class="info">
			<text class="tips">取件信息(取件码/手机号/姓名)</text>
			<!-- <textarea v-model="remark" placeholder="请输入取件信息" maxlength="250" /> -->
			<view class="biaoge">
				<view class="in" style="box-shadow: inset 0px -1px 1px -1px #dcdcdc;">
					<view class="le"><text>手机号</text></view>
					<input class="ri" maxlength="11" v-model="phone" type="number" placeholder="输入手机号码" />
				</view>
				<view class="in" style="box-shadow: inset 0px -1px 1px -1px #dcdcdc;">
					<view class="le"><text>姓名</text></view>
					<input class="ri" type="text" v-model="name" placeholder="输入姓名" />
				</view>
				<view class="in">
					<view class="le"><text>取件码</text></view>
					<input class="ri" maxlength="10" type="number" v-model="code" placeholder="输入取件码" />
				</view>
			</view>
		</view>
		<view :class="btn" @tap="send">
			发布
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	import expressData from "../../static/js/expressData.js";
	var items = ['圆通快递', '中通快递', '申通快递', '顺丰快递', '韵达快递', '百世快递', '黄马甲快递', '京东快递', '芝麻开门快递', '其他快递'];
	export default {
		data() {
			return {
				types: [],
				typeIndex: 0,
				expresses: [],
				getAddress: '',
				remark: '',
				expressIndex: 0,
				price: 0,
				phone: '',
				code: '',
				name: ''
			}
		},
		computed: {
			...mapState(['user']),
			btn() {
				if (this.judge()) {
					return "btn";
				}
				return "btn dis"
			}
		},
		methods: {
			send() {
				if (this.judge()) {
					if(this.user.phone==null||this.user.phone.length == 0) {
						uni.showModal({
							title: '通知提醒',
							content: '你当前未绑定手机号,点确定绑定手机号',
							showCancel: true,
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if(res.confirm){
									uni.navigateTo({
										url:"../verificationcode/verificationcode"
									})
								}else{
									return;
								}
							}
						});
						return;
					}
					uni.showModal({
						title: '通知消息',
						content: '请确保取件信息已完善(取件码/手机号/姓名)',
						showCancel: true,
						cancelText: '检查下~',
						confirmText: '提交',
						success: res => {
							if (res.confirm) {
								utils.post("express/add", {
									getAddress: this.getAddress,
									expressAddress: this.expressIndex,
									type: this.types[this.typeIndex],
									price: this.price,
									phone: this.phone,
									phone: this.phone,
									name: this.name,
									code: this.code,
									userId: this.user.id
								}, function(data) {
									uni.navigateBack({
										delta: 1
									})
								});
							}
						}
					});
				}
			},
			judge() {
				if (this.getAddress.length == 0) {
					return false;
				}
				if (this.price == 0) {
					return false;
				}
				if (this.phone.length == 0) {
					return false;
				}
				if (this.code.length == 0) {
					return false;
				}
				if (this.name.length == 0) {
					return false;
				}
				return true;
			},
			bindPickerChange(e) {
				let index = e.detail.value;
				this.typeIndex = index;
			},
			expreessChange(e) {
				let index = e.detail.value;
				this.expressIndex = index;
			},
			getAdd() {
				uni.chooseLocation({
					success(res) {
						console.log(res);
					}
				});
			}
		},

		onLoad() {
			this.types = items;
			this.expresses = expressData.expresses;
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	picker {
		width: 100%;
	}

	.inp {
		width: 92%;
		margin-left: 4%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		border-radius: 6upx;
		align-items: center;
		margin-top: 40upx;
	}

	.biaoge {
		width: 100%;
		height: 330upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 330;
		background-color: #ffffff;
		margin-top: 20upx;
	}

	.in {
		width: 100%;
		height: 90upx;
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		border-radius: 6upx;
		align-items: center;
		height: 110upx;
	}

	.le {
		width: 180upx;
		height: 110upx;
		line-height: 110upx;
		text-align: center;
		font-size: 24upx;
		color: #999999;

	}

	.ri {
		font-size: 28upx;
		flex: 1;
		margin-left: 30upx;
		margin-right: 20upx;
		height: 110upx;
	}

	.left {
		width: 180upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		font-size: 24upx;
		color: #999999;
		box-shadow: inset -1px 0px 1px -1px #dcdcdc;
	}

	.right {
		font-size: 28upx;
		flex: 1;
		margin-left: 30upx;
		margin-right: 20upx;
	}

	.info {
		width: 92%;
		margin-left: 4%;
		display: flex;
		flex-direction: column;
	}

	.tips {
		font-size: 26upx;
		margin-top: 40upx;
		color: #999999;
	}

	.info textarea {
		width: 93%;
		padding: 20upx 20upx;
		font-size: 28upx;
		margin-top: 20upx;
		background-color: #ffffff;
		border-radius: 6upx;
	}

	.btn {
		width: 92%;
		margin-left: 4%;
		background-color: #EE3F4D;
		color: #ffffff;
		line-height: 100upx;
		height: 100upx;
		text-align: center;
		margin-top: 60upx;
		border-radius: 6upx;
		font-size: 30upx;
	}

	.dis {
		opacity: 0.3;
	}
</style>
